<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" name="" id="mytext">
    <button id="myadd">add</button>
    <ul class="list"></ul>
    <script type="module">
        import ajax from "./util.js"

        class TodoList {
            constructor(select) {
                this.listEle = document.querySelector(select)
                this.listData = [] //数据列表

                this.init()
            }
            init() {
                //获取数据的方法
                this.getList()

                //绑定事件【事件委托】
                this.bindEvent()
            }


            bindEvent() {
                // 事件委托
                this.listEle.onclick = evt => {
                    // console.log(evt.target.nodeName);
                    if (evt.target.nodeName === "BUTTON") {
                        this.removeItem(evt.target)
                    }
                }
            }
            getList() {
                //获取数据
                ajax({
                    url: "http://localhost:3000/list",
                    success: (res) => { //这边用普通函数,this是undefined,所以用箭头函数指向父级的this或者用that=this先保存一份
                        this.listData = res
                        console.log(res);
                        this.render()
                    },
                    error: (err) => {
                        console.log(err);
                    }
                })
            }

            render() {
                this.listEle.innerHTML = this.listData.map(item => `
                <li>
                    ${item.text}
                    <button data-index=${item.id}>del</button>
                </li>`).join("")
            }

            addIteam(text) {
                // 先在“test.json”添加后，在success回调里面添加节点
                ajax({
                    url: `http://localhost:3000/list`,
                    data: {
                        text
                    },
                    method: "POST",
                    success: (res) => {
                        // console.log("添加成功" + JSON.stringify(res));
                        // location.reload();//全局刷新页面，不采用此方式
                        this.getList()
                    },
                    error: (err) => {
                        console.log("添加失败");
                    }
                })
            }

            removeItem(target) {
                target.parentNode.remove()
                // console.log(target.dataset.index);
                //删除任务
                ajax({
                    url: `http://localhost:3000/list/${target.dataset.index}`,
                    method: "DELETE",
                    success: (res) => {
                        console.log("删除成功");
                    },
                    error: (err) => {
                        console.log("删除失败");
                    }
                })
            }
            updateItem() {

            }

        }
        const obj = new TodoList('.list')

        myadd.onclick = () => {
            // console.log(mytext.value);
            obj.addIteam(mytext.value)
        }

    </script>
</body>

</html>